<template>
  <div class="el-row">
    <div class="el-col-4 avatar">
      <el-avatar size="large" :src="Question.avatar_url" shape="square"></el-avatar>
    </div>
    <div class="el-col-14 el-col-offset-1 info">
      <div class="user-link">
        <router-link style="text-decoration: none; color: rgb(74,138,244);" class="hah" :to="`/app/question_answer/${Question.question_id}`">{{Question.question_title}}</router-link>
      </div>
      <div class="sig">
        <p>{{Question.question_detail}}</p>
      </div>
      <div class="AF">
        <p>{{Question.create_time}}&nbsp;·&nbsp;{{Question.ans_num}}回答</p>
      </div>
    </div>
    <div class="el-col-5 but"></div>
  </div>
</template>

<script>

export default {
  name: "UserQuestionCard",
  props: {
    Question: {
      type: Object,
      default: {
        avatar_url: "",     // 用户头像
        user_id: 0,         // 用户的id
        nickname: "nickname", // 提问的用户昵称
        question_id: 0,     // 问题id
        question_title: "", // 问题标题
        question_detail: "",  // 问题详情
        create_time: "xxx-xxx-xxx xxx:xxx:xxx",    // 创建时间
        modify_time: "xxx-xxx-xxx xxx:xxx:xxx",    // 修改时间
        ans_num: 0       // 关注人回答数
      }
    }
  }
}
</script>

<style scoped lang="scss">
.user-link {
  font-weight: bold;
  font-size: 20px;
  margin-left: 10px;
  padding-top: 20px;
  //a {
  //  color: #4a8af4;
  //}
  //&:hover {
  //  text-decoration: underline;
  //}
}

.sig {
  margin-top: 0;
  font-weight: normal;
  font-size: 14px;
  margin-left: 10px;
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.info {
  align-items: center;
}

.AF {
  margin-top: 0;
  font-weight: normal;
  font-size: 14px;
  margin-left: 10px;
}

.hah {
  &:hover {
    text-decoration: rgb(74,138,244);
  }
}

.but {
  align-items: center;
  display: flex;
}
</style>